<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>发表</title>
        <style>
            /*页头部分 勿改*/
            /*设置div背景色为white*/
            /*以下部分和页脚部分统一*/
            body{margin: 0;
                background-color: #f9f9f9;  }
            a{text-decoration:none}
            .banner {
                z-index:99999;
                width:100%;
                height:70px;
                top:0;
                left:0;
                position: fixed;
                overflow: hidden;
                background: #fff;
                border-bottom: 1px solid rgba(30,35,42,.06);
                box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
                background-clip: content-box;
                background-color: white;
                filter:alpha(Opacity=50);
                opacity: 0.95;
            }
            #logo {
                margin-top: 11px;
                margin-left: 42px;
                width: 115px;
                height: 46px;

            }
            .searchDiv{
                position: relative;
                top: -75px;
                left: 182px;
                height: 40px;
                width: 224px;
                border: 0;
            }
            #search {
                position: relative;
                top: 30px;
                left: 0;
                width: 224px;
                height: 30px;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                border: 1px solid #999999;
                font-size: 13px;
                background-color: transparent;
            }
            #btnLeft{
                margin-left: 30px;
                width: 235px;
                position: absolute;
                right: 12.6%;
                top: 20px;
            }
            #searchicon{
                position: relative;
                bottom: 0;
                left: 195px;
                width: 28px;
                height: 28px;
            }
            #hpBtn{
                width: 112px;
                height: 30px;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                border: 1px solid #999999;
                background-color: white;
                font: normal 15px 微软雅黑 ;
                color: #666666;
                float: right;
            }
            #ppBtn{
                margin-right: 7px;
                float: right;
                width: 112px;
                height: 30px;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                border: 1px solid #999999;
                background-color: white;
                font: normal 15px 微软雅黑 ;
                color: #666666;
            }
            /*页脚*/
            footer{
                bottom: 0;
                width: 100%;
                height: 60px;
                clear: both;
                padding-top: 60px;
                padding-bottom: 0;
            }
            #footer{
                text-align: center;
                background-color: white;
                height: 40px;
                width: 100%;
                margin-top: 20px;
                overflow: hidden;
                box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
                background-clip: content-box;
            }
            #footText{
                height: 20px;
                margin: 5px auto;
            }


            /*<---------------------以下是页面独有样式-------------------------*/

            /*发布和保存按钮所在div的位置样式：长宽固定（800×40），居中*/
            .publishBtnDiv{
                width:800px;
                height:40px;
                margin:0 auto;
                position: relative;
                overflow: hidden;
                background: #f9f9f9;
                border-bottom: 1px solid rgba(30,35,42,.06);
                box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
                background-clip: content-box;
            }
            /*发布按钮样式：长宽固定（100×28），按钮在框中右浮*/
            #publish{
                padding:0;
                width: 100px;
                height: 28px;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                border: 1px solid #999999;
                background-color: white;
                font: normal 15px 微软雅黑 ;
                color: #666666;
            }
            /*保存草稿按钮样式*/
            #save{
                width: 100px;
                height: 28px;
                margin-right: 7px;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                border: 1px solid #999999;
                background-color: white;
                font: normal 15px 微软雅黑 ;
                color: #666666;
            }
            /*标题输入栏样式：长宽固定（800×60），居中*/
            #publishTitle{
                width: 800px;
                height: 60px;;
                font:normal 22px 微软雅黑;
                border:0;
                background-color: aliceblue;
            }
            /*文本编辑栏（插件）外框样式：长宽固定（800×500），居中*/
            .bannerPublish{
                width:800px;
                height:500px;
                margin:15px auto;
                position:relative;
                overflow:hidden;
                background: #fff;
                border-top: 1px solid rgba(30,35,42,.06);
                border-bottom: 1px solid rgba(30,35,42,.06);
                border-left: 1px solid rgba(30,35,42,.06);
                border-right: 1px solid rgba(30,35,42,.06);
                box-shadow: 0 5px 5px 5px rgba(0,34,77,.05);
                background-clip: content-box;
            }
        </style>
    </head>

    <body>
    <!--页头块-->
        <div class="banner">
            <img src="logologin.png" id="logo"/>
            <div class="searchDiv">
                <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
                <a href="https://www.baidu.com"><img src="搜索.png" id="searchicon" /></a>
            </div>
            <div id="btnLeft">
                <input type="button" name="homepage" id="hpBtn" value="个人中心">
                <input type="button" name="homepage" id="ppBtn" value="首页">
            </div>
        </div >

    <!--发表按钮、保存按钮-->
        <div class="publishBtnDiv" style="top:107px;">
            <div style="float:right;padding-top: 5.9px">
                <input type="button" name="publish" id="publish" value="发表">
                <input type="button" name="publish" id="save" value="保存草稿">
            </div>
        </div>
        <br/><br/><br/><br/><br/><br/>

    <!--标题输入框-->
        <div style="margin:0 auto; text-align:center;">
            <input type="text" name="title" id="publishTitle" value="    请 输 入 文 章 标 题">
        </div>

    <!--编辑栏，供后台接入文本编辑器插件-->
        <div id="publishInput" class="bannerPublish">
            <br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/>
        </div>
        <br/><br/><br/><br/><br/><br/><br/><br/>
        <!--页脚部分-->
        <!--页脚部分已预留上边缘，无需再留-->
        <!--logo图片为文件夹中的giggleIcon.png-->
        <footer>
            <div id="footer">
                <div id="footText">
                    <img src="giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px"   >
                    <em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
                    <a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
                    <em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2017 Zealers 版权所有</em>
                </div>
            </div>
        </footer>
    <!--页脚部分结束-->
    </body>

</html>
